<template>
    <div>
      <h1>使用内置的 fetch API 进行请求</h1>
      <div>
        <button type="button" @click="getRolePageHandler">角色分页列表</button>
        <button type="button" @click="postRolesHandler">新增角色</button>
        <button type="button" @click="deleteRolesByids">删除角色</button>
        <button type="button" @click="putRolesByRoleID">修改角色</button>
        <button type="button" @click="kuangbaoshanchu">狂暴删除</button>
        <button type="button" @click="kuangbaotianjia">狂暴添加</button>
        <button type="button" @click="dengru">登入</button>
      </div>
      <div>
        <ul>
          <li v-for="item in roles" :key="item.id">{{ item.id }}--{{ item.name }}</li>
        </ul>
      </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref } from 'vue'
  
  import{ getRolesPage,postRoles,putRolesByRoleID,deleteRolesByids,kuangbaoshanchu,kuangbaotianjia, dengru } from'./demo2'
  import { } from './demo1'
  
  const roles = ref([])

    const getRolePageHandler = async () => {
      const resJson = await getRolesPage()
    
      console.log(resJson.data, 'resJson')
      roles.value = resJson.data.list

    }

  
  const postRolesHandler = async () => {
    const resJson = await postRoles()
    console.log(resJson, 'resJson')
  }
  
  // get
  // const fetchGetRolesList = async () => {
  //   var myHeaders = new Headers()
  //   myHeaders.append('User-Agent', 'Apifox/1.0.0 (https://apifox.com)')
  //   myHeaders.append(
  //     'Authorization',
  //     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJSW5mbyI6eyJ1c2VySWQiOjIsInVzZXJuYW1lIjoiYWRtaW4iLCJuaWNrbmFtZSI6Iuezu-e7n-euoeeQhuWRmGFkbWluIiwiZGVwdElkIjoxLCJyb2xlcyI6IkFETUlOIn0sImlzcyI6ImR5czYyMzAiLCJleHAiOjE3Mjg5MDk5MTgsIm5iZiI6MTcyODg3MzkyOCwiaWF0IjoxNzI4ODczOTE4fQ.9xhdL57Qs38Mlm0K-TCwgrQjET1ZS2jUZhIOob0-pGk'
  //   )
  
  //   let requestOptions = {
  //     method: 'GET',
  //     headers: myHeaders,
  //     redirect: 'follow'
  //   }
  //   const res = await fetch(
  //     'http://goapi.sanjitian.cn/api/roles/page?keywords=管理员&pageNum=1&pageSize=10',
  //     requestOptions
  //   )
  
  //   console.log(res)
  
  //   if (res.ok) {
  //     const resJson = await res.json()
  //     console.log(resJson, 'resJson')
  
  //     roles.value = resJson.data.list
  
  //     console.log(roles.value)
  //   }
  // }
  
  // post
  
  // fetchGetRolesList()
  // fetchPostRoles()
  
  // onMounted(async () => {
  //   await fetchGetRolesList()
  // })
  </script>
  
  <style></style>
  